<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <hello-world></hello-world>
            <hello-jack></hello-jack>
            <hello-link></hello-link>
            <test-com></test-com>
        </div>
        <script src="./lib/vue.js"></script>
        <script>
            Vue.component('test-com', {
                template: '<div>test</div>'
                // 局部组件只能在注册它的父组件中使用
                // template: '<div>test<hello-world></hello-world></div>'
            });
            var HelloWorld = {
                data: function() {
                    return {
                        msg: 'HelloWorld'
                    };
                },
                template: '<div>{{msg}}</div>'
            };
            var HelloJack = {
                data: function() {
                    return {
                        msg: 'HelloJack'
                    };
                },
                template: '<div>{{msg}}</div>'
            };
            var HelloLink = {
                data: function() {
                    return {
                        msg: 'HelloLink'
                    };
                },
                template: '<div>{{msg}}</div>'
            };
            var app = new Vue({
                el: '#app',
                data: {},
                components: {
                    'hello-world': HelloWorld,
                    'hello-jack': HelloJack,
                    'hello-link': HelloLink
                }
            });
        </script>
    </body>
</html>
